Styles
This theme comes with 6 different color that you can easily switch via the settings page of the admin panel. Please note that the color defined in the admin doesn't necessarily reflect the actual style color. This option will be changed in a future update of Premium URL Shortener. Below is a list of styles available.
- Default Style
- Green
- Orange
- Yellow
- Blue
- Custom* - This is defined a gray color in the style selector in the settings
* The custom style is actualy a darkish color but it includes a background on the homepage. Please note that this background can be added to any other styles by following the instructions below. The default background is from http://unsplash.com which provides free backgrounds. Thank you Caroline Gutman :)
Style Generator
This theme includes two LESS files that you can use to generate custom styles. LESS is dynamic CSS processor that is very easy to work with. You cannot directly use LESS because it requires its JS library however you will need to process it using a LESS processor. Once you have done all of your changes, you can use any of the online processors to generate CSS files. Below is a list of LESS along with description.
Main Stylesheet: style.less
This file has all of the style clauses that your will find in style.css. You can change this file if you want to change the layout and other stuff.
Style Generator: color.less
If you want to simply generate styles, you can use this file.
How to use LESS
You don't need to have a very good knowledge of LESS to work with it. If you open one of the files in a text editor, you will see right at beginning the following. The following is what you can use to generate different styles. All you need to do is to change hex colors in the right side and then copy everything and paste into the LESS processor that you can easily find online.
@blue: #54ACE7;
@green: #53D566;
@red: #F75151;
@black: #232730;
@yellow: #f4b04f;
@body_color: #E7EAED; // Body color
@content_bg: #fff; // Content BG
@main: #e4813f; // Main Color - This is the main color that will be use throughout the stylesheet. Make sure it is not too light
@header: #fff; // Header Bg
@header_color: @black; // Header color
@mainForm: #fff; // Shortener Form Bg
@sidebar: @black; // Sidebar Color
@facebook_button: #3B5998; // Color of facebook button
@twitter_button: #409DD5; // Color of twitter button
@google_button: #D34836; // Color of google button
How to add a custom background
Currently the only style that has a background is custom.css. If you open that file, you will find the code below. Notice the highlighted part. This is the path to the image located in the THEMEFOLDER/static/. You can also add url(../static/YOUIMAGE) in the any of the other stylesheets.
section.main-section {
background: #393f4d url(static/splash.jpg);
border-bottom: 1px solid #232730;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
border-top: 2px solid #232730;
border-top: 2px solid rgba(0, 0, 0, 0.2);
color: white;
}
Remove Latest URLs on Homepage
This theme comes with a new block on the homepage for the latest URLs. If you open THEMESFOLDER/index.php, you will see the code below. If you want to remove this, remove the whole code. If you want to change the number of URLs to show then you can change highlighted part.
<?php if($urls = $this->db->get("url",array("public" => "1", "userid" => "0"),array("limit"=>10,"order"=>"date"))): ?>
<section class="dark urls-holder">
<div class="container content">
<div class="row" id="user-content">
<div class="col-md-8 addmargin" id="data-container">
<h2><?php echo e("Latest Public URLs") ?></h2>
<?php $user = new stdClass; $user->domain = $this->config["url"] ?>
<?php foreach ($urls as $url): ?>
<?php include(TEMPLATE."/components/public_url_loop.php") ?>
<?php endforeach ?>
</div>
<div class="col-md-4 addmargin text-right">
<?php echo $this->ads(300,0) ?>
</div>
</div>
</div>
</section>
<?php endif ?>